<!--  -->
<template>
  <div class="login">
    <section class="loginBox">
      <h3 class="title">叩丁狼商品管理系统</h3>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item prop="userName" class="el-form-item">
          <div class="ipt">
            <el-icon><Avatar /></el-icon>
            <el-input
              v-model="ruleForm.userName"
              type="text"
              autocomplete="off"
              placeholder="请输入账号"
            />
          </div>
        </el-form-item>
        <el-form-item prop="pwd">
          <div class="ipt">
            <el-icon><Lock /></el-icon>
            <el-input
              v-model="ruleForm.pwd"
              type="password"
              placeholder="请输入密码"
              show-password
            />
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loginFn(ruleFormRef)">
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </section>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref } from 'vue';
import { FormInstance, ElMessage } from 'element-plus';
import { LoginApi, GetInfoApi } from '../../request/api';
import Cookie from 'js-cookie';
import { useRouter } from 'vue-router';
// import { useStore } from 'vuex';
// const store = useStore();
const router = useRouter();
const ruleFormRef = ref<FormInstance>();
// 双向绑定用户名与密码
const ruleForm = reactive({
  userName: '967967',
  pwd: '967967',
});
//用户名的校验
const validateUserName = (
  rule: unknown,
  value: string | undefined,
  callback: (msg?: string) => void
) => {
  if (value?.trim() === '') {
    callback('请输入用户名!');
  } else {
    callback();
  }
};
// 密码框的校验
const validatePwd = (
  rule: unknown,
  value: string | undefined,
  callback: (msg?: string) => void
) => {
  if (value?.trim() === '') {
    callback('请输入密码!');
  } else {
    callback();
  }
};
// 表单验证规则
const rules = reactive({
  userName: [{ validator: validateUserName, trigger: 'blur' }],
  pwd: [{ validator: validatePwd, trigger: 'blur' }],
});

// 登录点击事件
const loginFn = (formRef?: FormInstance) => {
  if (!formRef) return;
  ruleFormRef.value?.validate().then(() => {
    // 登录请求api
    LoginApi({
      password: ruleForm.pwd,
      username: ruleForm.userName,
    }).then((res) => {
      // console.log(res);
      if (res.code == 200) {
        Cookie.set('token', res.data.tokenHead + res.data.token, {
          expires: 7,
        });
        // 获取当前用户的信息
        // store.dispatch('getInfo').then((res) => {
        //   router.push('/home');
        // });
        //
        // GetInfoApi().then((res) => {
        //   if (res.code == 200) {
        //     // 存储数据到vuex
        //     store.commit('updataMenus', res.data.menus);
        //     store.commit('updataUserName', res.data.username);
        //     router.push('/home');
        //   } else {
        //     ElMessage.error(res.message);
        //   }
        // });
        router.push('/');
      } else {
        ElMessage.error(res.message);
      }
    });
  });
};
</script>
<style lang="less" scoped>
.login {
  width: 100%;
  height: 100%;
  background-color: #2d3a4b;
  position: fixed;
  .loginBox {
    width: 500px;
    height: 400px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    text-align: center;
    .title {
      color: #fff;
      font-size: 28px;
      margin-bottom: 30px;
    }
    .demo-ruleForm {
      margin: 0 auto;
      .el-form-item {
        margin-bottom: 30px;
        // 输入框样式
        .ipt {
          width: 100%;
          display: flex;
          align-items: center;
          outline: #ccc 1px solid;
          background-color: #283443;
          border-radius: 5px;
          .el-icon {
            font-size: 26px;
            margin-left: 10px;
            color: #ccc;
          }
        }
        :deep(.el-form-item__content) {
          margin-left: 0 !important;
        }
        :deep(.el-input__wrapper) {
          background-color: #283443;
          box-shadow: none;
          height: 50px;
        }
        :deep(.el-input__inner) {
          color: #fff;
        }
      }
      .el-button {
        width: 100%;
        height: 50px;
      }
      :deep(.el-form-item__error) {
        margin: 5px 0 0 5px;
        font-size: 14px;
      }
      :deep(.el-form-item.is-error .el-input__validateIcon) {
        font-size: 18px;
      }
      :deep(.el-icon) {
        font-size: 18px;
      }
    }
  }
}
</style>
